<nb-card [nbSpinner]="loading" nbSpinnerStatus="primary" nbSpinnerSize="large" class="card-scroll">
	<nb-card-header>
		<ngx-back-navigation
			[haveLink]="true"
			class="float-left"
			(click)="navigateToIntegrations()"
		></ngx-back-navigation>
		<nb-actions class="float-left pt-2" size="small">
			<nb-action class="toggle-layout p-0">
				<h5>{{ 'INTEGRATIONS.HUBSTAFF_PAGE.NAME' | translate }}</h5>
				<nb-icon
					icon="settings-2-outline"
					[nbContextMenu]="supportContextActions"
				></nb-icon>
			</nb-action>
		</nb-actions>
	</nb-card-header>
	<nb-card-body>
		<div class="mb-3">
			<button
				nbButton
				[disabled]="!selectedProjects"
				(click)="syncProjects()"
				status="primary"
				class="mr-2"
			>
				<nb-icon class="mr-1" icon="edit-outline"></nb-icon
				>{{ 'BUTTONS.SYNC' | translate }}
			</button>
			<button nbButton (click)="autoSync()" status="primary" class="mr-2">
				<nb-icon class="mr-1" icon="edit-outline"></nb-icon
				>{{ 'BUTTONS.AUTO_SYNC' | translate }}
			</button>
		</div>
		<div class="hubstaff-container">
			<ng-select
				class="mb-2"
				bindLabel="name"
				[items]="organizations$ | async"
				[searchable]="true"
				[placeholder]="'INTEGRATIONS.HUBSTAFF_PAGE.SELECT_ORGANIZATION' | translate"
				(change)="selectOrganization($event)"
				appendTo="body"
			>
			</ng-select>
			<angular2-smart-table
				[settings]="settingsSmartTable"
				[source]="projects$ | async"
				(userRowSelect)="selectProject($event)"
				style="cursor: pointer;"
				#projectsTable
			></angular2-smart-table>
		</div>
	</nb-card-body>
</nb-card>
